/* === v-toggle === */

.v-toggle {
  display: inline-block;
  position: relative;
  font-size: @toggle-font-size;
  line-height: @toggle-height;
  height: @toggle-height;
  vertical-align: middle;
  user-select: none;
  &.is-disabled {
    &.v-switch__core,
    &.v-switch__label {
      cursor: not-allowed;
    }
  }
  &__label {
    transition: .2s;
    position: absolute;
    size: @toggle-width @toggle-height;
    left: 0;
    top: 0;
    display: inline-block;
    font-size: @toggle-font-size;
    cursor: pointer;
    &--left {
      i {
        left: 6px;
      }
    }
    &--right {
      i {
        right: 6px;
      }
    }
    & * {
      line-height: 1;
      top: 5px;
      position: absolute;
      font-size: @toggle-font-size;
      display: inline-block;
      color: @white;
    }
  }
  &__input {
    display: none;
  }
  &__core {
    margin: 0;
    display: inline-block;
    position: relative;
    width: @toggle-width;
    height: @toggle-height;
    border: 1px solid @toggle-off-color;
    outline: none;
    border-radius: @toggle-core-border-radius;
    box-sizing: border-box;
    background: @toggle-off-color;
    cursor: pointer;
    transition: border-color .3s, background-color .3s;

    & .v-toggle__button {
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 100%;
      transition: transform .3s;
      width: @toggle-button-size;
      height: @toggle-button-size;
      background-color: @white;
    }
  }

  &.is-checked {
    .v-toggle__core {
      border-color: @toggle-on-color;
      background-color: @toggle-on-color;
    }
  }

  &.is-disabled {
    .v-toggle__core {
      border-color: @toggle-disabled-color !important;
      background: @toggle-disabled-color !important;

      span {
        background-color: @toggle-disabled-text-color !important;
      }

      ~ .v-toggle__label * {
        color: @toggle-disabled-text-color !important;
      }
    }
  }

  &--wide {
    .v-toggle__label {
      &.v-toggle__label--left {
        span {
          left: 10px;
        }
      }
      &.v-toggle__label--right {
        span {
          right: 10px;
        }
      }
    }
  }
}

.label-fade-enter,
.label-fade-leave-active {
  opacity: 0;
}
